<!--  -->
<template>
  <div>
    <el-card shadow="hover">
      <template #header>
        <div class="clearfix">
          <span>语言详情</span>
        </div>
      </template>
      <div v-for="(item, index) in language" :key="index" class="progress_item">
        <span class="title"> {{ item.title }}</span>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="item.percentage"
          :color="item.color ? item.color : '#42b983'"></el-progress>
      </div>

    </el-card>

  </div>
</template>

<script>

</script>
<script setup lang='ts' >
import { ref, PropType } from 'vue'
import { ILanguage } from "../types.ts"
defineProps({
  language: {
    type: Object as PropType<ILanguage[]>,
    required: true
  }
})


</script>
<style lang='less' scoped>
.progress_item {

  margin: 10px 0;
}

.title {
  font-weight: 600;
  display: inline-block;
  margin: 5px 5px;
}
</style>
